<template>
    <div class="container">
      <!-- 顶部信息 -->
      <div class="search-bar">
        <input 
          v-model="searchKeyword" 
          placeholder="挂号ID" 
          class="search-input"
        >
        <button class="refresh-btn" @click="select">搜索</button>
        <button class="refresh-btn"@click="shuanx">刷新</button>
      </div>
  
      <div class="card">
        
        <div class="info-item">
          <span>挂号单号：</span>
          <span>{{ xxi.regId }}</span>
        </div>
  
        <div class="info-grid">
          <div class="info-item">
            <span>医生姓名：</span>
            <span>{{ xxi.userName }}</span>
          </div>
          <div class="info-item">
            <span>科室名称：</span>
            <span>{{ xxi.deptName }}</span>
          </div>
          <div class="info-item">
            <span>患者姓名：</span>
            <span>{{xxi.patientName}}</span>
          </div>
          <div class="info-item">
            <span>就诊时间：</span>
            <span>{{ xxi.caseDate }}</span>
          </div>
        </div>
      </div>
  
      <!-- 处方信息 -->
      <div class="card">
        <div class="prescription-header">
          <h3>【药用处方】【1】</h3>
          <span class="total">【处方总额】：￥{{ Amount }}</span>
        </div>
        
        <div class="prescription-header">
          <h3>【检查处方】【2】</h3>
          <span class="total">【处方总额】：￥{{ Amountx }}</span>
        </div>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%"
      @selection-change="handleSelectionChange" v-model="ids">
    <el-table-column type="selection" width="55" />
    <el-table-column label="序列" width="">
      <template #default="scope">{{ scope.row.index }}</template>
    </el-table-column>
    <el-table-column prop="itemName" property="药物名称" label="药物名称" width="100" />    
    <el-table-column prop="num" property="数量" label="数量" width="" show-overflow-tooltip/>
    <el-table-column prop="price" property="单价（元）" label="单价（元）" width="100" />
    <el-table-column prop="amount" property="金额（元）" label="金额（元）" width="100" />
    <el-table-column prop="remark" property="服用说明" label="服用说明" width="150" />
    <el-table-column  property="状态" label="状态" width="" >
      <template #default="scope">{{ scope.row.status==0?"未支付":"" }}</template>
    </el-table-column>
  </el-table>

      </div>
  
      <!-- 操作区域 -->
      <div class="action-bar">
         <div class="left-actions">
          <!-- <button class="btn cancel-all">取消全部</button> -->
        </div> 
        <div class="right-actions">
          <span class="total-amount">订单总额：<em> {{amount}} </em></span>
          <button class="btn cash" @click="zhif">现金</button>
          <button class="btn other-pay" @click="getzhifufs">其他支付方式</button>
        </div>
      </div>
    </div>
    <!-- 其他收费列表 -->
    <el-drawer v-model="drawer2" :direction="direction">
    <template #header>
      <h4>选择收费类型</h4>
    </template>
    <template #default>
      <div>
        <el-button type="primary" v-for="x in zhifu" :key="x.dictValue" @click="confirmClick(x)">{{ x.dictLabel }}</el-button>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
      </div>
    </template>
  </el-drawer>
  </template>
  
  <script lang="ts" setup>
  import http from '@/http'
import { onMounted, ref } from 'vue'
import { ElMessage, type ComponentSize,type TableInstance } from 'element-plus'
import { formatDate } from '@/utils/dateFormatter';//引入全局日期格式化工具
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

const drawer2 = ref(false)

function cancelClick() {
  drawer2.value = false
}
function confirmClick(x) {
  ElMessageBox.confirm('你是否选择'+x.dictLabel+'进行支付 ?')
    .then(() => {
      zhifType.value=x.dictValue
       addx()
      // 点;击确定按钮的确定
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}

//支付类型
let zhifType=ref(0)

// 查询的条件 类型
const status=0;
// 用药总金额
let Amount=ref("0");
// 列表总金额
let Amountx=ref("0");
// 查询的单号
let searchKeyword=ref('')
let xxi=ref([])

const tableData=ref ([])
const tableDatax=ref([])

interface dict {
  id: number
  date: string
  name: string
  address: string
}
// 添加支付详细
let zhifuxx=ref([])
// 修改数量的条件 itemRefId
let itemRefId=ref([])
//修改状态的条件
let aa=ref([])
// 数量
let num=ref([])
//编号组
let ids=ref([])
let x=ref([])
let amount=ref(0)
let  sum=()=>{
                amount.value=x.value.reduce((acc, cur) => acc + cur, 0);
                }
// 表格的元素引用
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<number[]>([]) // 存储选中的 deptId
// 获取选中的用户
const handleSelectionChange = (val: dict[]) => {
  console.log("选中的行数据:", val);
  zhifuxx.value=val
  console.log(zhifuxx.value)
  // 修改状态的条件
  multipleSelection.value = val.map(row => row.itemId);
aa.value=multipleSelection.value;
console.log("选中的条件:", aa.value);
// 获取选中的数量
multipleSelection.value = val.map(row => row.num);
num.value=multipleSelection.value;
console.log("选中的数量:", num.value);
// 选中的金额
multipleSelection.value = val.map(row => row.amount);
x.value=multipleSelection.value;
console.log("选中的金额:", x.value);
multipleSelection.value = val.map(row => row.itemRefId);
itemRefId.value=multipleSelection.value;
console.log("选中的数量:", itemRefId.value);
// for(x.value)
  // 使用 map 方法从选中的行数据中提取 deptId，并将这些 deptId 存储在 multipleSelection 数组中
  sum()
  multipleSelection.value = val.map(row => row.index);
  ids.value=multipleSelection.value;
  console.log("选中的 dictId:", multipleSelection.value);
}
  // 查询按钮
  let select=()=>{
    if(searchKeyword.value==''){
    ElMessage({
    message: '请输入挂号单号',
    type: 'warning',
  })
  return;
}
 tableData.value=([])
 tableDatax.value=([])
    gtepage()
  }
  // 刷新按钮
  let shuanx=()=>{
    searchKeyword.value=''
    gtepage()
  }
  // 查询索所有 药物  药用处方  基础信息
  let gtepage=()=>{
    //药用处方金额
    http.post("/docharge/getAmount",{searchKeyword:searchKeyword.value,status:status}).then((res)=>{
      console.log(res)
      Amount.value=res
    })
    // 列表总金额
    http.post("/docharge/getAmountx",{searchKeyword:searchKeyword.value,status:status}).then((res)=>{
      console.log(res)
      Amountx.value=res
    })
    //基础信息
    http.post("/docharge/getxxi",{searchKeyword:searchKeyword.value,status:status}).then((res)=>{
      console.log(res)
      xxi.value=res
    })
    //药物
    http.post("/docharge/getPage",{searchKeyword:searchKeyword.value,status:status}).then((res)=>{
      console.log(res)
      tableDatax.value=res
    tableDatax.value.forEach((item, index) => {
  const newItem = {
    ...item,
    index: index + 1
  };
  tableData.value.push(newItem);
});
    })
  }
   onMounted(()=>{
    gtepage()
   })
  //  支付按钮
  let zhif=()=>{
    zhifType.value=0
    addx()
    } 
    //添加  
    let addx=()=>{
      if(ids.value.length<=0){
      ElMessage({
    message: '选择需要支付的单子',
    type: 'warning',
  })
      return;
    }
    http.post("/docharge/addCharge",{
      xxi:xxi.value,
      amount1:amount.value,
      zhifType:zhifType.value,
      zhifuxx:zhifuxx.value,
      //修改状态的条件
      aa:aa.value,
    }).then((res)=>{
      console.log(res)
    })
    gtepage()
  }
  // 其他支付数据
  let zhifu=ref([])
     // 获取其他支付方式
     let getzhifufs=()=>{
    // 从字典表中获取
    http.post("/docharge/getzhifufs").then((res)=>{
      console.log(res)
      zhifu.value=res
    })
    drawer2.value=true;
   }
  </script>
  
  <style scoped>
  .container {
    max-width: 800px;
    margin: 20px auto;
    font-family: 'Microsoft YaHei', sans-serif;
  }
  
  .card {
    background: white;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
  }
  
  .q-link {
    color: #1890ff;
    cursor: pointer;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
  }
  
  .info-item span:first-child {
    color: #666;
    margin-right: 8px;
  }
  
  .prescription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .total {
    color: #f5222d;
    font-weight: bold;
  }
  
  .items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }
  
  .items-table th,
  .items-table td {
    border: 1px solid #e8e8e8;
    padding: 12px;
    text-align: center;
    font-size: 14px;
  }
  
  .items-table th {
    background: #fafafa;
    color: rgba(0,0,0,.85);
  }
  
  .status-unpaid {
    color: #f5222d;
  }
  
  .action-bar {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: white;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
  }
  
  .btn {
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
  }
  
  .cancel-all {
    border: 1px solid #d9d9d9;
    background: white;
    color: #666;
  }
  
  .cash {
    background: #1890ff;
    border: 1px solid #1890ff;
    color: white;
  }
  
  .other-pay {
    background: #52c41a;
    border: 1px solid #52c41a;
    color: white;
  }
  
  .total-amount {
    font-size: 16px;
    margin-right: 20px;
  }
  
  .total-amount em {
    color: #f5222d;
    font-style: normal;
    font-size: 18px;
  }
  </style>